<script setup>
import Icon from '@/components/module/Icon.vue'
import { ref } from 'vue'
import router from '@/routers/router.js'
import { ArrowRight } from '@element-plus/icons-vue'

const props = defineProps({
  // 默认索引
  index: {
    type: String
  },
  width: {
    type: String,
    default: '130px'
  },
  // 数据
  arr: {
    type: Array,
    default: []
  },
  // 是否需要伸缩
  needTelescopic: {
    type: Boolean,
    default: false
  },
  // 是否需要文字提示
  needTooltip: {
    type: Boolean,
    default: false
  },
  // 是否展开
  defaultState: {
    type: String,
    default: 'expand'
  },
  // 是否悬浮
  isSuspension: {
    type: Boolean,
    default: false
  }
});

const _index = ref(props.index);
const isCollapse = ref(props.defaultState==='stow');

const click = (i)=>{
  if (i.url !== undefined) {
    _index.value = i.index;
    router.push(i.url);
  } else if (i.func !== undefined) {
    i.func();
  }
}
</script>
<template>
  <div class="rc-menu" :class="isSuspension?'rc-menu-sus':'rc-menu-fix'" :style="{'width': isCollapse?'60px':width}">
    <el-tooltip v-for="item in arr" class="box-item" effect="light" :content="item.name" placement="right" :disabled="needTooltip?!isCollapse:true">
        <div v-if="item.child===undefined" class="rc-menu-item" :class="_index===item.index?'rc-menu-item-click':''"  @click="click(item)">
          <Icon :name="item.icon" class="rc-menu-item-icon"></Icon>
          <div class="rc-menu-item-title">{{item.name}}</div>
        </div>
        <div v-else class="rc-sub-menu" :style="{'height': isCollapse?'60px':'180px'}">
          <div class="rc-sub-menu-title">
            <i class="rc-menu-item-icon" :class="item.child[0].icon"></i>
            <div class="rc-menu-item-title">{{item.child[0].name}}</div>
          </div>
          <div v-for="i2 in item.child" v-if="i2.name !== item.child[0].name" class="rc-sub-menu-item">
            <i class="rc-menu-item-icon" :class="i2.icon"></i>
            <div class="rc-menu-item-title">{{i2.name}}</div>
          </div>
        </div>
    </el-tooltip>
    <!--收起展开按钮-->
    <el-tooltip class="box-item" effect="dark" content="展开" placement="right" :disabled="needTooltip?!isCollapse:true">
      <div v-if="needTelescopic" class="rc-menu-item" @click="isCollapse = !isCollapse">
        <ArrowRight class="rc-menu-item-icon" :style="{'transform': isCollapse?'rotate(0deg)':'rotate(180deg)'}" />
        <div class="rc-menu-item-title">{{isCollapse?'展开':'收起'}}</div>
      </div>
    </el-tooltip>
  </div>
</template>
<style scoped>
.rc-menu {
  transition: all 0.5s ease-out;
  overflow: hidden;
  user-select: none;
  background-color: rgba(255,255,255,0.8);
  backdrop-filter: blur(30px);
}

.rc-menu-fix {
  border-right: rgba(200,200,200,0.6) 1px solid;
  height: calc(100vh - 70px)
}

.rc-menu-sus {
  box-shadow: 0 0 2px 1px rgba(10,10,10, 0.1);
  margin: 20px;
  height: calc(100vh - 40px - 70px);
  border-radius: 15px;
}
.rc-menu-sus:hover {
  box-shadow: 0 0 10px 1px rgba(10,10,10,0.2);
}

.rc-menu-item {
  height: 60px;
  overflow: inherit;
  transition: all 0.1s ease-out;
}

.rc-menu-item-click {
  color: var(--parent-color);
}

.rc-menu-item-icon {
  height: 60px;
  width: 60px;
  float: left;
  padding: 20px;
  transition: transform 0.5s ease-out;
}

.rc-menu-item-title {
  height: 60px;
  line-height: 60px;
  float: left;
  text-align: justify;
  text-align-last: justify;
  width: calc(100% - 60px - 22px);
}

.rc-sub-menu {
  height: 60px;
  width: 100%; overflow: inherit; transition: inherit;
}

.rc-sub-menu-title {
  height: 60px;
  overflow: inherit;
  transition: inherit;
}

.rc-sub-menu-item {
  height: 60px;
  overflow: inherit;
  transition: inherit;
  margin-left: 20px;
}

</style>